<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="3" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							会刊内容提交
						</div>
					</div>
					<div class="login-box">
						<div class="top-nav-box">
							<div class="top-round">
								<img src="../assets/gay-round.png" alt="">
							</div>
							<div class="top-font">
								企业基本信息确认
							</div>
							<div class="top-arrow">
								<img src="../assets/gay-arrow.png" alt="">
							</div>
							<div class="top-round">
								<img src="../assets/gay-round.png" alt="">
							</div>
							<div class="top-font">
								会刊提交
							</div>
							<div class="top-arrow">
								<img src="../assets/blue-arrow.png" alt="">
							</div>
							<div class="top-round">
								<img src="../assets/blue-round.png" alt="">
							</div>
							<div class="top-font">
								预览
							</div>
							<div class="top-arrow">
								<img src="../assets/gay-arrow.png" alt="">
							</div>
							<div class="top-round">
								<img src="../assets/gay-round.png" alt="">
							</div>
							<div class="top-font">
								确认提交
							</div>
						</div>
						<div class="top-nav-help-box">
							<div><span>
									*大会会刊采取中英文混排的排版方式，您所提交的中英文信息将同时出现在贵公司的会刊页。
								</span></div>
							<div><span>
									*大会会刊在线提交的内容有四部分:联系方式、企业logo、企业简介和主营业务。除主营业务，其他栏目均为选填项，如您不予填写，大会会刊相应栏目将无法显示信息。</span>
							</div>

							<div><span>*本页面将于2024年11月8日关闭，此日期前可随时进行修改，请务必于此日期前完成确认和提交。</span></div>
						</div>
						<div class="contact-box">
							<el-form :model="ruleForm" :rules="rules" label-position="top" status-icon ref="ruleForm"
								label-width="100px" class="demo-ruleForm">
								<div class="contact-title-box">
									*LOGO提交：
								</div>
								<div class="contact-info-box">
									<img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar">
								</div>
								<div class="contact-title-box">
									*基本信息：
								</div>
								<div class="contact-info-box company-info-box">
									<div class="company-info-font-box">
										<div class="company-info-span"><span>企业名称(中):</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.company_title }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>企业名称(英):</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.e_company_title }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>展位号:</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.booth_number }}</font>
										</div>
									</div>
								</div>
								<div class="contact-title-box">
									*联系方式：
								</div>
								<div class="contact-info-box company-info-box">
									<div class="company-info-font-box">
										<div class="company-info-span"><span>通讯地址(中):</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.address }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>通讯地址(英):</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.e_address }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>手机号:</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.phone }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>邮箱:</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.email }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>网址:</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.company_website }}</font>
										</div>
									</div>
									<div class="company-info-font-box">
										<div class="company-info-span"><span>邮编:</span></div>
										<div class="company-info-font">
											<font>{{ ruleForm.postal_code }}</font>
										</div>
									</div>
								</div>

								<div class="contact-title-box">
									*企业简介：
								</div>
								<div class="contact-info-box">
									<span class="company-detail-font">企业简介(中):</span>
									<div class="company-detail-box">
										<span>
											{{ ruleForm.company_detail }}
										</span>
									</div>
									<span class="company-detail-font">企业简介(英):</span>
									<div class="company-detail-box">
										<span>
											{{ ruleForm.e_company_detail }}
										</span>
									</div>
								</div>
								<div class="contact-title-box">
									*主营业务(此为必填项,可多选)：
								</div>
								<div class="contact-info-box">
									<span class="main-business-font">
										{{ ruleForm.main_business }}
									</span>
								</div>
								<div class="contact-title-box">
									主营产品：
								</div>
								<div class="contact-info-box">
									<span class="main-business-font">
										{{ ruleForm.other_detail }}
									</span>
								</div>
								<el-form-item class="form-btn-box" v-if="save_status == 0">
									<el-button class="save-btn" type="primary"
										@click="submitForm()">核对完成,确认提交</el-button>
									<el-button class="reset-btn" @click="returnView()">返回</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		show
	} from "/src/api/journalContent.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	export default {
		name: 'JournalContentComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent
		},
		data() {
			return {
				ruleForm: {
					avatar: '',
					company_title: '',
					company_sub_title: '',
					e_company_title: '',
					e_company_sub_title: '',
					address: '',
					e_address: '',
					phone: '',
					wx_code: '',
					email: '',
					company_website: '',
					postal_code: '',
					other_detail: '',
					company_detail: '',
					e_company_detail: '',
					main_business: [],
					booth_number: ''
				},
				save_status: 0
			};
		},
		methods: {
			show() {
				show().then(data => {
					let rows = data.data.data;
					if (rows) {
						this.ruleForm.company_title = rows.cn_enterprise_full;
						this.ruleForm.company_sub_title = rows.cn_enterprise_short;
						this.ruleForm.e_company_title = rows.en_enterprise_full;
						this.ruleForm.e_company_sub_title = rows.en_enterprise_short;
						this.ruleForm.address = rows.cn_address;
						this.ruleForm.e_address = rows.en_address;
						this.ruleForm.postal_code = rows.post_code;
						this.ruleForm.phone = rows.telephone;
						this.ruleForm.wx_code = rows.wx;
						this.ruleForm.email = rows.e_mail;
						this.ruleForm.wx_code = rows.wx;
						this.ruleForm.company_website = rows.url;
						this.ruleForm.other_detail = rows.other;
						this.ruleForm.id_code_type = rows.files;
						this.ruleForm.company_detail = rows.cn_company_introduction;
						this.ruleForm.e_company_detail = rows.en_company_introduction;
						this.ruleForm.checked_main_business = rows.main_business;
						this.ruleForm.main_business = rows.main_business_list;
						this.ruleForm.avatar = rows.files;
						this.ruleForm.booth_number = rows.booth_number;
					}
				})
			},
			submitForm() {
				this.save_status = 1;
				this.$message({
					message: '提交成功！',
					type: 'success'
				});
			},
			returnView() {
				this.$router.push("/journal-content-save")
			}
		},
		created() {
			this.show();
		}
	}
</script>

<style scoped>
	:deep(.el-form-item__content) {
		margin: auto;
		width: 400px;
		margin-top: 20px
	}

	:deep(.reset-btn) {
		width: 120px;
		height: 35px;
		border-radius: 4px;
		border: 1px solid #2B64A8;
		letter-spacing: 4px;
		font-weight: bol
	}

	.main-business-font {
		font-weight: 400;
		font-size: 16px;
		text-align: justify;
		color: #333333;
	}

	.company-detail-box {
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #DDDFE4;
		padding: 10px;
		font-weight: 400;
		font-size: 16px;
		text-align: justify;
		color: #333333;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.company-detail-font {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 30px;
		letter-spacing: 2px;
		text-align: left;
		font-style: normal;
	}

	.company-info-font-small {
		width: 320px;
		float: left;
		font-size: 16px;
	}

	.company-info-span {
		float: left;
		text-align: right;
		width: 120px;
	}

	.company-info-font-box {
		overflow: hidden;
	}

	.company-info-box font {
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		margin-left: 15px;
		font-size: 16px;
	}

	.company-info-box span {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 30px;
		letter-spacing: 2px;
		text-align: left;
		font-style: normal;
	}

	.contact-avatar-font {
		color: #EB3C2C;
		font-size: 14px;
		font-weight: 400;
		line-height: 3;
	}

	.contact-title-box {
		margin-top: 15px;
		margin-bottom: 10px;
	}

	:deep(.save-btn) {
		width: 200px;
		height: 35px;
		background: #2B64A8;
		border-radius: 4px;
		font-size: 16px;
		letter-spacing: 4px;
		font-weight: bold;
	}

	:deep(.el-checkbox) {
		margin-right: 20px;
	}

	:deep(.el-textarea__inner) {
		height: 100px;
	}

	.contact-logo-font {
		font-weight: 400;
		font-size: 14px;
		color: #2B64A8;
		line-height: 30px;
		text-align: left;
		font-style: normal;
	}

	:deep(.avatar) {
		width: 178px;
		height: 178px;
		display: block;
	}

	:deep(.el-form-item__label) {
		color: #000;
	}

	.contact-input-small {
		width: 350px;
		float: left;
		margin-right: 40px;
	}

	.contact-info-box {
		width: 805px;
		padding: 20px;
		border-radius: 4px;
		border: 1px solid #DDDFE4;
	}

	.contact-box {
		margin: auto;
		font-weight: bold;
		color: #4188EB;
		line-height: 30px;
		letter-spacing: 1px;
		text-align: left;
		font-style: normal;
		width: 850px;
		overflow: hidden;
		font-size: 16px
	}

	.top-nav-help-box {
		width: 820px;
		height: 120px;
		background: #EEF4FE;
		border-radius: 4px;
		margin: auto;
		color: #4188EB;
		line-height: 31px;
		padding: 15px;
		margin-top: 20px;
		text-align: left;
		font-size: 16px;
	}

	.top-nav-box {
		overflow: hidden;
		font-size: 16px
	}

	.top-round img {
		width: 100%;
	}

	.top-round {
		width: 18px;
		float: left;
		margin-left: 10px;
	}

	.top-arrow img {
		width: 100%;
	}

	.top-arrow {
		width: 42px;
		float: left;
		margin-left: 10px;
	}

	.top-font {
		float: left;
		color: #999999;
		line-height: 1.1;
		font-weight: 400;
		margin-left: 10px;
	}

	.login-box {
		width: 870px;
		/* height: 290px; */
		margin: 20px auto;
		border-radius: 3px;
		padding-top: 20px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>